<template>
	<navbar-bg text="志愿活动" :isback="false">
		<template v-slot class="padding-lr-com">
			<view style="padding:0 20px;">
				<image :src="imgURL3+'activity/active.png'" mode="widthFix" style="width: 100%;border-radius: 30rpx;">
				</image>
			</view>
		</template>
	</navbar-bg>
	<view class="content">
		<TitleNav title="活动风采" @more="Tozixun" />
		<view class="l-f l-row-sb l-mg-top20">
			<view v-for="(item,index) in writer.slice(0,2)" :key="index" style="width: 48%;">
				<NewsItem :options="item" />
			</view>
		</view>
		<!-- 活动列表模块开始 -->
		<!-- 活动预告 -->
		<TitleNav title="活动报名" :showMore="false" />
		<ActiveItem v-for="(item,index) in activelist" :key="index" :options="item" />
		<!-- 活动列表模块结束 -->
		<view class="flex-row text-low text-sm"
			style=" margin: 30rpx auto 100rpx; justify-content: center;height: 40px;">
			<view style="" class="text-low">我是有底线的~</view>
		</view>
	</view>
	<loading></loading>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getList
	} from '@/api/active/active';
	import {
		getArticle
	} from '@/api/zixun/zixun';
	import {
		imgURL3,
		imgURL2,
		imgURL
	} from '@/api/request'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app"
	import TitleNav from '@/pages/index/components/title-nav/index.vue'
	import NewsItem from '@/pages/index/components/news-item/index.vue'
	import ActiveItem from '@/pages/index/components/active-item/index.vue'
	const page = reactive({
		current: 1,
		size: 6,
		total: 0
	})
	const Tozixun = () => {
		uni.navigateTo({
			url: '/pages/message/message'
		})
	}
	const article_param = reactive({
		categoryId: '1',
		current: 1,
		size: 3
	})
	const writer = ref([])
	const activelist = ref([])
	onLoad(() => {
		getlist()
		get_article()
	})
	onPullDownRefresh(() => {
		page.current = 1
		activelist.value = []
		getlist()
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		if (activelist.value.length < page.total) {
			page.current++
			getlist()
		}
	})
	// 获取文章
	const get_article = () => {
		getArticle(article_param).then(res => {
			writer.value = JSON.parse(JSON.stringify(res.data.list))
		})
	}
	//跳转文章详情
	const toWriter_detail = (id) => {
		uni.navigateTo({
			url: '/pages/message/detail?id=' + id
		})
	}
	const getlist = () => {
		getList({
			current: page.current,
			size: page.size
		}).then(res => {
			// 假设 activelist.value 和 res.data.data 是两个数组
			activelist.value = [...activelist.value, ...res.data.data]
			page.total = Number(res.data.total)
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>